<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Compound Object Interpolator</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
    <script type="text/javascript" src="../../lib/d3.js"></script>
</head>

<body>

    <div id="compound" class="clear">
        <span>Compound Interpolation<br></span>
    </div>

    <script type="text/javascript">
        var max = 21,
            data = [];

        var compoundScale = d3.scalePow()
            .exponent(2)
            .domain([0, max])
            .range([{
                    color: "#add8e6",
                    height: "15px"
                }, // <-A
                {
                    color: "#4169e1",
                    height: "150px"
                } // <-B
            ]);

        var res = compoundScale(20);
        debugger;

        for (var i = 0; i < max; ++i) data.push(i);

        function render(data, scale, selector) { // <-C
            var bars = d3.select(selector).selectAll("div.v-bar")
                .data(data);
            bars.enter()
                .append("div")
                .classed("v-bar", true)
                .style("height", function (d) { // <-D
                    return scale(d).height;
                })
                .style("background-color", function (d) { // <-E
                    return scale(d).color;
                })
                .text(function (d, i) {
                    return i;
                });
        }

        render(data, compoundScale, "#compound");
    </script>

</body>

</html>